<template>
    <view>
        <u-navbar :is-back="false" :background="background" height="90">
            <view class="slot-wrap">
                <view class="title">
                    <u-icon label="论坛" label-size="40" label-color="#efefef" size="70" name="/static/icon/f1.png">
                    </u-icon>
                    <!-- <u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon> -->
                </view>

                <view class="search">
                    <view class="icon">
                        <view class="cirle" @click="seachSelect">

                            <u-icon size="40" name="/static/icon/search2.png"></u-icon>
                        </view>
                        <input :class="isSearchShow?'input':''" placeholder="请输入关键词" v-model="searchword"
                            @confirm="searchForum()" />
                    </view>

                    <view class="icon">
                        <view class="cirle" @click="add()">

                            <u-icon size="40" name="/static/icon/edit.png"></u-icon>
                        </view>
                    </view>
                </view>
            </view>

        </u-navbar>
        
        <view class="wrap">
            <!--            <view class="box">
                <view class="f-title">nih</view>
                <view class="Grid-cell">sd</view>
                <view class="Grid-cell u-1of2">sd</view>
            </view> -->
            <!-- <u-line color="red" /> -->
            <view v-for="item in forumList" :key="item.id">
                <view class="f-main" @click="goMain(item.id,item.forumTitle)">
                    <view class="f-title">{{ item.forumTitle }}</view>
                    <view class="box">
                        <view class="Grid-cell u-1of3">
                            <u-icon :label="item.landlord" label-color="#626768" size="25" name="/static/icon/my.png">
                            </u-icon>
                        </view>
                        <view class="Grid-cell right-to">
                            <u-icon :label="item.updateTime" label-color="#626768" size="30"
                                name="/static/icon/time.png"></u-icon>
                        </view>
                        <view class="Grid-cell u-1of7 ">
                            <u-icon :label="item.commentNumber" label-color="#626768" size="30"
                                name="/static/icon/reply.png"></u-icon>
                        </view>
                    </view>
                    <u-line color="black" />
                </view>
            </view>
            <!-- 
            <view class="box">
                <view class="Grid-cell u-1of2">

                </view>
                <view class="Grid-cell ">sds</view>
                <view class="Grid-cell u-1of3">sdsd</view>
            </view> -->

        </view>
    </view>
</template>

<script>
    import home from "../../components/home/index.vue"
    import {
        getForums,
        selectForumByWord
    } from "../../api/data.js"
    export default {
        components: {
            home
        },
        data() {
            return {
                background: {
                    // backgroundColor: '#001f3f',

                    // 导航栏背景图
                    // background: "url('/static/poster/poster4.jpg') no-repeat",
                    // 还可以设置背景图size属性
                    // backgroundSize: 'cover',

                    // 渐变色
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                searchword: '',
                isSearchShow: false,
                uname: 'sds',
                reply: 1,
                utime: '2021.2.11 15:21',
                forumList: [],
                token: '',
                userInfo: {},
            }
        },
        onLoad() {

        },
        onPullDownRefresh() {
            const _this=this
                console.log('refresh');
                setTimeout(function () {
                    _this.getForums()
                    // console.log(uni.getStorageSync('token'))
                    _this.token = uni.getStorageSync('token')
                    _this.userInfo = uni.getStorageSync('userInfo')
                    uni.stopPullDownRefresh();
                }, 500);
            },
        onShow() {
            this.getForums()
            // console.log(uni.getStorageSync('token'))
            this.token = uni.getStorageSync('token')
            this.userInfo = uni.getStorageSync('userInfo')

        },
        methods: {
            seachSelect() {
                this.isSearchShow = !this.isSearchShow;
            },
            add() {
                // console.log("test......")
                if (this.token == '') {
                    uni.showModal({
                        title: '提示',
                        content: '您还未登录，请登录后再操作',
                        cancelText: '稍后再试',
                        success: function(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    //1为添加，2为回复
                                    url: '/pages/login/index'
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                } else {
                    uni.navigateTo({
                        //1为添加，2为回复
                        url: '/pages/forum/addposts/index?type=1'
                    })
                }
            },
            goMain(id, title) {



                // console.log(this.userInfo)
                // console.log("sd")
                uni.navigateTo({
                    url: '/pages/forum/main/index?id=' + id + '&title=' + title
                })
                // uni.navigateTo({
                //                 url: '/pages/articles/index',
                //             })
            },
            getForums() {
                const _this = this
                getForums().then(function(res) {
                    // console.log(res.data)
                    _this.forumList = res.data.data
                })
            },
            searchForum() {
                console.log(this.searchword)
                uni.navigateTo({
                    url: '/pages/forum/search/index?searchword=' + this.searchword
                })
                // selectForumByWord({
                //     word: this.searchword
                // }).then(function(res){
                //     console.log(res.data)
                // })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #fffaf0;
        // background-color: #fff9ee;
    }

    .slot-wrap {
        width: 100%;

        .search {
            float: right;
            padding: 20rpx;
            display: flex;
        }

        .title {
            float: left;
            padding: 10rpx 30rpx;
            display: flex;
            font-size: 40rpx;
            color: #efefef;
        }

        // flex: 1;
    }

    .icon {
        flex: 1;
        display: flex;
        height: 60rpx;
        opacity: 0.9;
        text-align: left;
        border: 2rpx solid #eeeeee;
        border-radius: 30rpx;
        background-color: #F5F5F5;
        color: #888888;

        margin-right: 20rpx;

        // width: 70rpx;
        // width: 80%;
        // font-size: 28rpx;
        // line-height: 60rpx;
        // margin: 0 auto;
        .cirle {
            padding: 7rpx 10rpx 0;
        }

        input {
            transition: width 1s;
            -webkit-transition: width 1s;
            /* Safari */
            width: 0rpx;
        }

        .input {
            padding: 5rpx;
            width: 250rpx;
            font-size: 32rpx;
        }

    }

    .box {
        display: flex;
        padding: 20rpx 0;
        color: #626768;
        // flex-direction: column;
        // justify-content: space-between;
        // height: 200rpx;
        // background-color: #4CD964;
    }

    .add {
        flex: 1;
        height: 60rpx;
        opacity: 0.9;
        text-align: left;
        border: 2rpx solid #eeeeee;
        border-radius: 30rpx;
        background-color: #F5F5F5;
        color: #888888;
        // width: 80%;
    }

    .item {
        flex: 0 0
    }

    .f-title {
        width: 100%;
        font-size: 38rpx;
        padding: 25rpx 0 10rpx;
        letter-spacing: 2rpx;
        color: #2C405A;
    }

    .f-main {
        padding: 0 40rpx;
    }

    .Grid-cell {
        flex: 1;
        // padding: 20rpx 0;
    }

    .Grid-cell.u-full {
        flex: 0 0 100%;
        // background-color: #007AFF;
    }

    .Grid-cell.u-1of2 {
        flex: 0 0 50%;
        // background-color: #3F536E;
    }

    .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
        // background-color: #ffff00;
    }

    .Grid-cell.u-1of4 {
        flex: 0 0 25%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of5 {
        flex: 0 0 20%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of7 {
        flex: 0 0 15%;
        // background-color: #55007f;
    }

    .right-to {
        // margin-left:auto;
        text-align: right;
        margin-right: 20rpx;
    }
</style>
